<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	  xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
	  layout:decorator="manage/common/layout">
<head>
<title>分类列表</title>
<script th:src="@{~/managed/layer/layer.js}" type="text/javascript"></script>
<link type="text/css" rel="stylesheet" th:href="@{~/managed/layer/skin/default/layer.css}" />
<link th:href="@{~/managed/bootstraptable/css/bootstrap-table.min.css}" rel="stylesheet" />
<script th:src="@{~/managed/bootstraptable/js/bootstrap-table.min.js}"></script>
<script th:src="@{~/managed/bootstraptable/js/bootstrap-table-zh-CN.min.js}"></script>
</head>
<body>
	<div class="main-content" layout:fragment="content">
		<div class="main-content-inner">
			<div class="breadcrumbs ace-save-state" id="breadcrumbs">
				<ul class="breadcrumb">
					<li><i class="ace-icon fa fa-home home-icon"></i> <a
						href="${ctx}/manage/view/home">主页</a></li>
					<li class="active">文章分类列表</li>
				</ul>
			</div>
			<div class="page-content">
				<div class="row">
					<div class="col-xs-12">										
						<div id="toolbar" class="btn-group">
							<a href="javascript:void(0);" onclick="addRecord()"
								class="btn btn-info btn-sm rightSize"> <span
								class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
							</a>
						</div>
						<table id="manager-table"></table>
					</div>
				</div>
			</div>
		</div>
		<div id="modal-Edit" class="modal fade" tabindex="-1"></div>
		<script th:inline="javascript">		
		var operateFormatter = function(value, row, index) {//赋予的参数
			var id = row.cateId;
			return [			
		          '<a href="javascript:void(0);" onclick="editRecord('+id+')"  class="btn btn-info btn-sm rightSize detailBtn" ><i class="fa fa-pencil-square-o"></i> 编辑</a>&nbsp;'
		          
		      ].join('');
		}

		var statusFormatter = function(value, row, index) {//赋予的参数
			var statusLink = "";
			if(value == 0){
		           statusLink =  "未激活";
		    }else{
		           statusLink =  "激活";
		    }
			return statusLink;
		}
		$('#manager-table').bootstrapTable({
			url : [[@{/manage/article/cateList}]],
			method : "post", //使用post请求到服务器获取数据
			toolbar : "#toolbar", //一个jQuery 选择器，指明自定义的toolbar 例如:#toolbar, .toolbar.
			uniqueId : "articleCateId", //每一行的唯一标识，一般为主键列
			cache : false, // 不缓存
			contentType : "application/x-www-form-urlencoded;charset=UTF-8",
			striped : true, // 隔行加亮
			queryParamsType : "limit",
			sidePagination : "server",
			sortable : true, //是否启用排序;意味着整个表格都会排序
			sortName : 'articleCateId', // 设置默认排序为 name
			sortOrder : "desc", //排序方式
			pagination : true, //是否显示分页（*）
			search : false, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
			strictSearch : false,
			showColumns : false, //是否显示所有的列
			showRefresh : true, //是否显示刷新按钮
			clickToSelect : true, //是否启用点击选中行
			pageNumber : 1, //初始化加载第一页，默认第一页
			pageSize : 10, //每页的记录行数（*）
			pageList : [ 5, 10, 15, 20 ], //可供选择的每页的行数（*）
			paginationPreText : "上一页",
			paginationNextText : "下一页",
			paginationFirstText : "首页",
			paginationLastText : "尾页",
			columns : [ {
				field : 'cateId',
				title : '文章分类编号',
				align : 'center',
				visible : false
			}, {
				field : 'cateName',
				title : '文章分类名称',
				align : 'center',
			}, {
				field : 'createTime',
				title : '文章分类创建时间',
				align : 'center'
			}, {
				field : 'updateTime',
				title : '文章分类更新时间',
				align : 'center',
			}, {
				field : 'cateStatus',
				title : '文章分类状态',
				align : 'center',
				formatter : statusFormatter
			}, {
				field : 'operate',
				title : '操作',
				align : 'center',
				valign : 'middle',
				width : '15%',
				formatter : operateFormatter
			//自定义方法，添加操作按钮
			} ]

		});

		
		function addRecord() {
			$("#modal-Edit").modal({remote: [[@{/manage/cateEdit?act=add}]]});
			$('#modal-Edit').modal('show');				
		}

		function editRecord(rowId) {
			$("#modal-Edit").modal({remote: /*<![CDATA[*/"/manage/cateEdit?act=edit&cateId="+rowId/*]]>*/});
			$('#modal-Edit').modal('show');				
		}	
		
		function deleteRecord(rowId) {
			layer.confirm('你确定要删除吗?', {icon: 3, title:'提示'}, function(index){				  
				$.ajax({
					type : "DELETE",
					url : "${ctx}/manage/article/deleteCate/"+rowId,
					contentType : "application/json; charset=utf-8",
					dataType : "json",
					success : function(data) {
						if (data.success) {
							layer.msg(data.message, {icon: 6,time: 1000});
							setTimeout(function(){
								$("#manager-table").bootstrapTable('refresh');
    	                    },3000);
						} else {
							layer.msg(data.message, {icon: 5,time: 1000});
							setTimeout(function(){
								$("#manager-table").bootstrapTable('refresh');
    	                    },3000);
						}
					},
					error : function() {
						layer.msg(data.message, {icon: 5,time: 1000});						  
					}
				});
			    layer.close(index);
		   });			
		}
		
		$('#modal-Edit').on('hidden.bs.modal', function (e) {
			//$('#issueForm').resetForm();
			$(this).removeData("bs.modal");
		});
	</script>
	</div>	
</body>
</html>

